<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="../dist/index.umd.js"></script>
</head>

<body>
  <input type="text" id="text" placeholder="请输入...">
  <button onclick="send()">send message</button>

  <p>receive: <span id="receive-text"></span> </p>
</body>

<script>
  iframeMessage.on('send_message', data => {
    document.getElementById('receive-text').innerText = data
  })

  const send = () => {
    const value = document.getElementById('text').value

    if (!value) return alert('请输入需要发送的消息')

    iframeMessage.dispatch('send_message', value)
  }
</script>

</html>